<template>
  <div class="chart-container">
    <div class="panel-container">
      <div class="panel-content">
        <div class="panel-line space-between">
          <div class="panel-title">{{ title }}</div>
          <div class="icon-box">
            <svg-icon @click="handleChange('pie')" :icon-class="type === 'pie' ? 'pieChartActive' : 'pieChart'" class="icon" :class="{ active: type === 'pie' }"></svg-icon>
            <svg-icon @click="handleChange('bar')" :icon-class="type === 'bar' ? 'barChartActive' : 'barChart'" class="icon" :class="{ active: type === 'bar' }"></svg-icon>
            <svg-icon @click="handleChange('line')" :icon-class="type === 'line' ? 'lineChartActive' : 'lineChart'" class="icon" :class="{ active: type === 'line' }"></svg-icon>
          </div>
        </div>
        <div class="chart-box" v-if="data && data.key && data.key.length > 0">
          <el-row :gutter="10">
            <el-col :span="16">
              <PieChart v-if="type === 'pie' && chartDataPie" :chartData="chartDataPie" :height="height" @click="handleClick" />
              <BarChart v-if="type === 'bar' && chartDataLine" :chartData="chartDataLine" :height="height" @click="handleClick" />
              <LineChart v-if="type === 'line' && chartDataLine" :chartData="chartDataLine" :height="height" @click="handleClick" />
            </el-col>
            <el-col :span="8">
              <slot name="data" :data="data"></slot>
              <div class="list" v-if="data">
                <div class="item" :class="{ w100: data.key.length < 16 }" v-for="(item, index) in data.key" :key="item + index">
                  <div class="title">{{ item }}</div>
                  <div class="num">{{ data.val[index] }}</div>
                </div>
                <div class="item total" v-if="data.total_num" :class="{ w100: data.key.length < 16 }">
                  <div class="title">合计</div>
                  <div class="num">{{ data.total_num }}</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <el-empty v-else style="height: 400px"></el-empty>
      </div>
    </div>
  </div>
</template>

<script>
import PieChart from '@/components/ECharts/PieChart.vue'
import LineChart from '@/components/ECharts/LineChart.vue'
import BarChart from '@/components/ECharts/BarChart.vue'

export default {
  name: 'PanelChart3',
  components: { PieChart, LineChart, BarChart },
  props: {
    data: Object,
    chartType: String,
    title: String,
  },
  data() {
    return {
      type: 'pie',
      height: '400px',
      chartDataLine: null,
      chartDataPie: null,
    }
  },
  watch: {
    data: function () {
      this.setChartsData(this.data)
    },
  },
  mounted() {
    if (this.chartType) {
      this.type = this.chartType
    }
  },
  destroyed() {},
  methods: {
    // 点击进入下一级
    handleClick() {},
    handleChange(type) {
      this.type = type
    },
    setChartsData(data) {
      if (data.key && data.key.length > 0) {
        this.chartDataLine = {
          xAxis: data.key,
          series: [
            {
              name: '',
              data: data.val,
            },
          ],
        }
        const seriesData = data.key.map((item, index) => {
          return {
            name: item,
            value: data.val[index],
          }
        })
        this.chartDataPie = {
          series: [
            {
              name: '',
              data: seriesData,
            },
          ],
        }
      }
    },
  },
}
</script>

<style scoped lang="scss">
.page-content {
  padding-top: 62px;
}
.panel-line {
  align-items: flex-start;
}

.panel-list {
  width: 100%;
}
.panel-item {
  width: 80%;
  margin-bottom: 16px;
  .line1 {
    margin-bottom: 6px;
  }
  .text-index {
    margin-right: 20px;
  }
  .bar {
    width: 80%;
    height: 10px;
    .inner {
      width: 50%;
      height: 100%;
      background: #5db42c;
      border-radius: 0 5px 5px 0;
      opacity: 0.8;
    }
  }
}
.panel-content {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.icon {
  font-size: 18px;
  cursor: pointer;
  margin-left: 10px;
  opacity: 0.5;
  &:hover {
    opacity: 1;
  }
  &.active {
    opacity: 1;
  }
}
.list {
  font-size: 12px;
  line-height: 2;
  color: #999;
  max-height: 400px;
  overflow: hidden;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
  .item {
    width: 50%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    &.w100 {
      width: 100%;
    }
    &:hover {
      font-weight: bold;
      color: #666;
    }
  }
  .total {
    font-weight: bold;
    color: #666;
  }
}
</style>
